<script setup lang="ts">
import { ref,reactive } from "vue";
import { getpic } from "@/api/pic";
import { useRouter } from "vue-router";
import { Toast } from "vant";
let router = useRouter();
const show = ref(false);
let username =ref('');
let phonenumber =ref('');
let piclist = reactive({
    list:[]
});
// let tupian = ref<[]>
const showPopup = () => {
    show.value = true;
    getpic()
    .then(res=>{
        // console.log(res.data);
        piclist.list=res.data.data
        // console.log(piclist.list);
    })
};
const onClickLeft = () => history.back();
const onClickRight = () =>{
    show.value = false
}
let skip = () =>{
    router.push('/addr')
}
let next = () =>{
    if(username.value==''&&phonenumber.value==''){
        Toast.fail('有内容未填写完成')
    }else{
        router.push('/addr')
    }
}
</script>

<template>
    <div class="section">
        <div class="section1">基本信息</div>
        <div class="section2" is-link @click="showPopup"><img src="https://www.pmdaniu.com/storages/124210/868aee87bcfe25b7b4bd93393e7a65a6-114945/images/%E5%9F%BA%E6%9C%AC%E4%BF%A1%E6%81%AF%E5%A1%AB%E5%86%99/u658.svg"></div>
        <div class="section3">头像</div>
        <div class="section4">用户信息</div>
        <div class="section5">
            <div><span>昵称</span><input type="text" placeholder="请输入您的昵称" maxlength="11" v-model="username"></div>
            <div><span>手机号码</span><input type="text" placeholder="请输入您的手机号码" maxlength="11" v-model="phonenumber"></div>
        </div>
        <div class="section6">
            <button @click="next">下一步(1/2)</button>
            <button @click="skip">跳过</button>
        </div>
    </div>
    <van-popup v-model:show="show" position="bottom" :style="{ height: '99%' ,backgroundColor: 'black'}">
        <van-nav-bar
        left-text="所有照片及视频"
        right-text="完成"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
        />
        <div class="imgs" v-for="item in piclist.list" :key="item">
            <img :src="item.img" />
        </div>
    </van-popup>
</template>

<style scoped>
.section1{
    height: 55px;
    line-height: 85px;
    font-size: 20px;
    color: white;
    background-color: #C1AB96;
}
.section2{
    margin-left: 30%;
    margin-top: 10%;
}
.section3{
    margin-left: 42%;
}
.section3,.section4{
    color: #C1AB96;
    font-size: 12px;
    margin-top: 5%;
}
.section4{
    margin-left: 10%;
}
.section5{
    width: 80%;
    margin-left: 10%;
}
.section5 div{
    border-bottom: 1px solid #F8E6D3;
    margin-top: 10%;
    font-size: 12px;
}
.section5 div:nth-child(1) input{
    text-indent: 30%;
}
.section5 div:nth-child(2) input{
    text-indent: 15%;
}
.section5 input{
    border: none;
    color: #C1AB96;
}
.section6{
    margin-top: 50%;
}
.section6 button{
    width: 80%;
    height: 40px;
    margin-left: 10%;
    margin-bottom: 5%;
    border-radius: 20px;
    font-size: 12px;
}
.section6 button:nth-child(1){
    background-color: #C1AB96;
    color: white;
    border: none;
}
.section6 button:nth-child(2){
    color: #C1AB96;
    border: 1px solid #C1AB96;
}    
.imgs{
    width: 100px;
    height: 100px;
    border: 1px solid;
    display: inline-block;
}
.imgs img{
    width: 100%;
    height: 100%;
}
</style>